<template>
  <li class="todo-list" @mouseleave="flag = false" @mouseover="flag = true">
    <label>
      <input type="checkbox" v-model="todo.isChecked" @change="changeById(todo.id)" />
      <span> {{todo.title}} </span>
    </label>
    <button class="btn btn-danger" v-show="flag" @click="removeList(todo.id)">删除</button>
  </li>
</template>

<script>
export default {
  name: "TodoItem",
  props:{
    todo:Object
  },
  data(){
    return {
      flag:false
    }
  },
  methods:{
    removeList(id){
      this.$bus.$emit("removeById",id)
    },
    changeById(id){
      this.$bus.$emit("changeChecked",id)
    }
  }
};
</script>

<style>
</style>